<template>
	<view class="mainbody">
		<view class="typebox">
			<view class="item" :class="ChooseType == item.code ? 'active' : ''" v-for="(item,index) in type" @tap="ChangeType(item.code)">
				{{item.name}}
			</view>
		</view>
		<view class="formbox">
			<view class="formitem" v-if="ChooseType == 2002">
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="content">
						<input type="text"  v-model="WithdrawData.name" placeholder="请填写" maxlength="30">
					</view>
				</view>
				<view class="item">
					<view class="title">
						身份证号
					</view>  
					<view class="content">
						<input type="idcard"  v-model="WithdrawData.idcard_number" placeholder="请填写" maxlength="22">
					</view>
				</view>
				<view class="item">
					<view class="title">
						银行卡号
					</view>
					<view class="content">
						<input type="number"  v-model="WithdrawData.bank_number" placeholder="请填写" maxlength="22">
					</view>
				</view>
				<view class="item">
					<view class="title">
						手机号
					</view>
					<view class="content">
						<input type="number" v-model="WithdrawData.phone" placeholder="请填写" maxlength="11" disabled>
					</view>
				</view>
			</view>
			<view class="formitem" v-if="ChooseType == 2003">
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="content">
						<input type="text"  v-model="WithdrawData.name" placeholder="请填写" maxlength="30">
					</view>
				</view>
			</view>
			<view class="formitem" v-if="ChooseType == 2004">
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="content">
						<input type="text"  v-model="WithdrawData.name" placeholder="请填写" maxlength="30">
					</view>
				</view>
			</view>
		</view>
		<view class="amountbox">
			<view class="InputBox">
				<view class="symbol">
					￥
				</view>
				<input class="input" type="digit" v-model="WithdrawData.amount" @blur="CheckAmount" placeholder="0.00" />
				<view class="info">
					<view class="all" @tap="allIn">
						全部转让
					</view>
					<view class="can">
						可转让￥{{CanUserIntegral}}
					</view>
				</view>
			</view>
		</view>
		<view class="ConfirmBut"  @tap="AppleWithdraw"><!--#007aff-->
			确认转让
		</view>
	</view>
</template>

<script>
	import {
		WithdrawApply,
		WithdrawConfig
	} from "@/api/withdraw.js";
	export default { 
		data() { 
			return {
				type:[],
				ChooseType:null,
				CanUserIntegral:0,
				WithdrawData:{
					phone:null,
					name:'',
					amount:'',
					idcard_number:'',
					bank_number:'',
					openid:null,
				},
				WithdrawDataSync:false,
			};
		},
		onShow() {
			this.GetWithdrawConfig();
		},
		methods:{
			GetWithdrawConfig(){
				uni.showLoading({
					title: this.$t(`正在加载…`),
					mask:true
				});
				WithdrawConfig({}).then(configres=>{
					uni.hideLoading();
					if(configres.code == 200){
						this.CanUserIntegral = configres.data.userinfo.can_integral;
						this.type = configres.data.type;
						this.ChooseType = configres.data.type[0].code;
						this.WithdrawData.openid = uni.getStorageSync("openid"); 
						this.WithdrawData.phone = configres.data.userinfo.phone;
					}else{
						uni.showModal({
							title: '获取数据失败，请重试',
							showCancel:false,
							success:res=>{
								if(res.confirm){
									uni.navigateBack({
										delta:1
									})
								}
							}
						}) 
					} 
				}).catch(err => { 
					uni.hideLoading();
					uni.showModal({
						title: '获取网络失败,请打开网络',
						showCancel:false,
						success:res=>{
							if(res.confirm){
								uni.navigateBack({
									delta:1
								})
							}
						}
					}) 
				}); 
			},
			ChangeSyncData(){
				this.$set(this.userAddress, 'is_default', !this.userAddress.is_default);
			},
			ChangeType(Code){
				this.ChooseType = Code;
			}, 
			allIn(){
				this.WithdrawData.amount = this.CanUserIntegral;
			},
			CheckAmount(event){
				let amount = event.detail.value;
				if(parseFloat(amount) > parseFloat(this.CanUserIntegral)){ 
					this.WithdrawData.amount = parseFloat(this.CanUserIntegral);
					uni.showToast({
						title:'转让锡豆不能超过可转让锡豆',
						icon:'none',
						duration:1000
					})
					return;
				}else if(parseFloat(amount) <= 0){
					uni.showToast({
						title:'转让锡豆不能小于0',
						icon:'none',
						duration:1000
					})
					this.WithdrawData.amount = this.CanUserIntegral;
					return;
				}
			},
			AppleWithdraw(){
				var Withdraw = this.WithdrawData;
				Withdraw.payment_type = this.ChooseType;
				Withdraw.order_no = this.generateRandomString(24);
				if (Withdraw.name == ''){
					uni.showToast({
						title:'请输入姓名',
						icon:'none',
					});
					return;
				}
				if (Withdraw.payment_type == 2002) {
					if (Withdraw.idcard_number == ''){
						uni.showToast({
							title:'请输入身份证',
							icon:'none',
						});
						return;
					}
					if (Withdraw.bank_number == ''){
						uni.showToast({
							title:'请输入银行卡',
							icon:'none',
						});
						return;
					}
				}
				if (Withdraw.amount == ''){
					uni.showToast({
						title:'请输入转让锡豆',
						icon:'none',
					});
					return;
				}
				uni.showLoading({
					title: '申请中...',
					mask:true,
				})
				WithdrawApply(Withdraw).then(res=>{
					uni.hideLoading(); 
					if(res.code == 200){
						uni.showToast({
							title:'申请成功',
							icon:'none',
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							}) 
						},1500)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000 
						});
					}
				})
			},//s
			generateRandomString(length) {
			  let result = '';
			  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
			  const charactersLength = characters.length;
			  for (let i = 0; i < length; i++) {
			    result += characters.charAt(Math.floor(Math.random() * charactersLength));
			  }
			  return result;
			}
		}
	}
</script> 

<style lang="scss">
	.typebox{
		width: 90%;
		padding: 3% 3%;
		margin: 20px 5%;
		display: flex;
		justify-content: flex-start;
		background-color: #fff;
		z-index: 997;
		border-radius: 10px;
		.item{
			margin: 0 16px;
			height: 60upx;
			line-height: 60upx;
			border-bottom: 4upx solid #fff;
		}
		.active{
			border-bottom: 4upx solid #e0a356;
			color: #e0a356;
		}
	}
	.formitem{
		width: 90%;
		margin: 2% 5%;
		padding: 0 6%;
		background-color: #fff;
		border-radius: 16rpx;
		.item{
			width: 100%;
			padding: 4% 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #9a9a9a;
			.title{
				width: 30%;
			} 
			.content{
				width: 70%;
				text-align: right;
			}
		}
		.item:last-child{
			border-bottom:none;
		}
	}
	.amountbox{
		width: 90%;
		margin: 2% 5%;
		padding: 12% 6%;
		background-color: #fff;
		border-radius: 16rpx;
		.InputBox{
			display: flex;
			align-items: center;
			position: relative;
			border-bottom: 1rpx solid #9a9a9a;
			.symbol{
				position: absolute;
				font-size: 60rpx;
			}
			.input{
				width: 60%;
				padding: 0 3% 0 10%;
				
				height: 60px;
				font-size: 60rpx;
			}
			.info{
				position: absolute;
				right: 1%;
				text-align: right;
				.all{
					color: #e2a356;
					z-index: 99;
				}
				.can{
					font-size: 26rpx;
					color: #9a9a9a;
					margin-top: 6rpx;
				}
			}
		}
	}
	// .ConfirmBut{
	// 	width: 60%;
	// 	height: 90rpx;
	// 	line-height: 90rpx;
	// 	margin: 40rpx 20% 40rpx 20%;
	// 	border-radius: 12rpx;
	// 	background-color: #007aff;
	// 	color: #fff;
	// 	text-align: center;
	// }
	.ConfirmBut { 
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		margin: 40rpx 10% 20rpx 10%;
		border-radius: 35rpx;
		background-color: #007aff;//#007aff;FE5C2D
		color: #fff;
		text-align: center;
	}
</style>
